<template>
    <div class="sub-list">
        <sub-item
            v-for="(item,index) in tableData"
            :key="index"
            :data="item"
            @update="$emit('update', $event)"
        ></sub-item>

        <btn-load
            size="small"
            :remain="remain"
            @click="btnLoadHandler"
        ></btn-load>
    </div>
</template>

<script>
import SubItem from './sub-item';

import LIST_MIXINS from '../mixins/list';

export default {
    mixins: [LIST_MIXINS],
    components: {
        SubItem,
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        defaultShowSize: {
            type: Number,
            default: 2,
        },
    },
    data() {
        return {
            
        };
    },
}
</script>

<style lang="scss" scoped>
    $bgColor: #f4f4f4;

    .sub-list{
        margin-top: 32px;
        padding: 0 20px;
        background-color: $bgColor;
        border-radius: 5px;
        position: relative;

        &:before{
            content: '';
            display: block;
            width: 18px;
            height: 18px;
            background-color: $bgColor;
            position: absolute;
            left: 30px;
            top: 0;
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }
</style>